<template>
  <view class="page">
    <view class="register-container">
      <view class="logo-section">
        <text class="logo-emoji">📝</text>
        <text class="logo-text">注册账号</text>
        <text class="logo-desc">欢迎加入校园零食跑腿</text>
      </view>

      <view class="form-section">
        <view class="input-group">
          <text class="input-label">📱</text>
          <input
            class="input-field"
            type="number"
            v-model="form.phone"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </view>

        <view class="input-group">
          <text class="input-label">🔒</text>
          <input
            class="input-field"
            :type="showPassword ? 'text' : 'password'"
            v-model="form.password"
            placeholder="请输入密码（至少6位）"
          />
          <text class="show-password" @click="showPassword = !showPassword">
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>

        <view class="input-group">
          <text class="input-label">✅</text>
          <input
            class="input-field"
            :type="showConfirm ? 'text' : 'password'"
            v-model="form.confirmPassword"
            placeholder="请再次输入密码"
          />
          <text class="show-password" @click="showConfirm = !showConfirm">
            {{ showConfirm ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>

        <view class="form-footer">
          <text class="login-link" @click="goToLogin">已有账号？去登录</text>
        </view>

        <view class="btn-register" @click="handleRegister">
          <text class="btn-text">注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from '@/utils/md5'
import { register as registerApi } from '@/api/user'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      form: {
        phone: '',
        password: '',
        confirmPassword: ''
      },
      showPassword: false,
      showConfirm: false,
      loading: false
    }
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),

    async handleRegister() {
      if (this.loading) return

      // 基础校验
      if (!this.form.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      if (!this.form.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }
      if (this.form.password.length < 6) {
        uni.showToast({ title: '密码至少6位', icon: 'none' })
        return
      }
      if (this.form.password !== this.form.confirmPassword) {
        uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
        return
      }

      this.loading = true
      try {
        uni.showLoading({ title: '注册中...' })

        const data = await registerApi({
          phone: this.form.phone,
          password: md5(this.form.password)
        })

        if (data && data.token) {
          // 保存token
          this.$store.commit('user/SET_TOKEN', data.token)

          // 获取用户信息
          await this.getUserInfo()

          uni.hideLoading()
          uni.showToast({ title: '注册成功', icon: 'success' })

          setTimeout(() => {
            uni.switchTab({ url: '/pages/index/index' })
          }, 1200)
        } else {
          throw new Error('注册失败')
        }
      } catch (error) {
        uni.hideLoading()
        let errorMsg = '注册失败'
        if (error && error.msg) errorMsg = error.msg
        else if (error && error.message) errorMsg = error.message
        uni.showToast({ title: errorMsg, icon: 'none' })
      } finally {
        this.loading = false
      }
    },

    goToLogin() {
      uni.navigateTo({ url: '/pages/user/login' })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 20rpx;
}

.register-container {
  width: 100%;
  max-width: 600rpx;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;

  .logo-emoji {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }

  .logo-text {
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 12rpx;
  }

  .logo-desc {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
}

.input-group {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
  gap: 16rpx;

  .input-label {
    font-size: 40rpx;
  }

  .input-field {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }

  .show-password {
    font-size: 36rpx;
    cursor: pointer;
  }
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 32rpx;

  .login-link {
    font-size: 24rpx;
    color: #667eea;
  }
}

.btn-register {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  padding: 28rpx;
  text-align: center;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);

  .btn-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
}
</style>
